<template>
	<view class="flex-col page">
		<view class="flex-col">

			<view class="flex-col group_2">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827070547580564.png"
					class="image_1" />
				<view class="flex-col section_1">
					<text class="text_1">推荐人：{{phone}}</text>
					<view class="divider">
						<!--*-->
					</view>
					<view class="flex-col group_3">
						<!--      <view class="justify-between" @click="userOption">
              <view class="flex-row">
                <image
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826689359081342.png"
                  class="image_2"
                />
                <text class="text_2">{{userText}}</text>
              </view>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826689432599499.png"
                class="image_3"
              />
            </view> -->
						<view class="flex-row group_6 view">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827071280199771.png"
								class="image_4" />
							<input class="text_4" v-model="form.foremanPhone" placeholder="请输入手机号码"></input>
						</view>
						<view class="justify-between group_6 view">
							<view class="flex-row">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827393322804515.png"
									class="image_4 image_6" />
								<input class="text_4" v-model="form.code" placeholder="请输入验证码"></input>

							</view>

							<view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" ref="uCode" @change="codeChange">
								</u-code>
							</view>
							<text class="text_5" @tap="getCode">{{tips}}</text>
						</view>

						<view class="justify-between group_6 view">
							<view class="flex-row">
								<image :src="imgUrl+'16557826680099271215.png'" class="image_11 image_16" />
								<!-- <text class="text_4">请输入密码(6~12位字母+数字)</text> -->
								<u-input v-model="form.password" :type="seen ? type_text : type_password"
									placeholder="请输入密码 (字母+数字)" placeholderClass="placeholderClass" border="none"
									class="text_4" clearable></u-input>
							</view>
							<image class="image100" v-show='seen' @click="changeSeen" :src="imgUrl+'login/open.png'" />
							<image v-show='!seen' @click="changeSeen" :src="imgUrl+'16557826676388745889.png'"
								class="image_11" />
						</view>
						<view class="divider_1">
							<!--*-->
						</view>
					</view>
					<view class="reg" @click="reg">
						<text class="text_6">立即注册</text>
					</view>
					<view class="w-full u-flex u-row-center u-m-t-20 app" @click="download()">
						<text>如已注册请点击下载APP</text>
					</view>

				</view>
			</view>
		</view>
		<view class="justify-center group_8">
			<image @click="value=!value" :src="$IMG_URL+(value==false?'/icons/radio.png':'/icons/radiocheck.png')"
				class="image_7" />
			<view class="group_9">
				<text class="text_7">已阅读并同意</text>
				<text class="text_8" @click="regAgreement">《用户注册协议》</text>
				<text class="text_9">与</text>
				<text class="text_10" @click="agreement">《隐私政策》</text>
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" :columns="columns" keyName="label" @confirm="confirm" @cancel="show=false"
			@close="show=false"></u-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		onLoad(option) {
			if (option.hasOwnProperty('ordersId')) {
				this.orderid = option.ordersId;
				this.getPhone(this.orderid)
			} else {
				this.$u.toast('参数缺失');
				return;
			}
		},
		data() {
			return {
				// androidApp: 'http://user.16zhuangcheng.cn.apk',
				androidApp:'https://user.16zhuangcheng.cn/user.apk',
				orderid: 0,
				value: true,
				userText: '请选择用户角色',
				seen: false,
				type_text: "text",
				type_password: "password",
				show: false,
				imgUrl: this.$IMG_URL,
				columns: [
					[{
						label: '用户',

						value: 103

					}, {
						label: '工长',
						value: 104
					}]
				],
				checked: [],
				phone: '',
				tips: '',
				seconds: 60,
				form: {
					ordersId: '',
					foremanPhone: '',
					code: '',
					password: ''
				}
			};
		},
		methods: {
			download() {
				console.log(this.androidApp);
				uni.downloadFile({
					url: this.androidApp, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
					}
				});
				// plus.runtime.openURL('http://web.77chaoxun.com/gongzhang.apk');
			},
			getPhone(ordersId) {
				this.$http('luser.phone', {
					ordersId: ordersId
				}).then(r => {
					if (r.code == 200) {
						this.phone = r.data.substr(0, 3) + "****" + r.data.substr(7, 11)
					}
				});
			},
			changeSeen() {
				this.seen = !this.seen;
			},
			codeChange(text) {
				this.tips = text;
			},
			userOption() {
				this.show = true;
			},
			confirm(e) {
				console.log(e);
				this.form.roleId = e.value[0].value;
				this.userText = e.value[0].label;
				this.show = false
			},
			reg() {

				// if (this.form.roleId == '') {
				// 	this.$u.toast('请选择用户角色');
				// 	return;
				// }
				if (this.form.foremanPhone == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.foremanPhone)) {
						this.$u.toast('手机号码格式错误');
						return;
					}
				}
				if (this.form.code == '') {
					this.$u.toast('请输入验证码');
					return;
				}
				if (this.form.password == '' || this.form.password.length < 6) {
					this.$u.toast('密码至少6位(字母+数字)');
					return;
				} else {
					let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);

					if (!reg.test(this.form.password)) {
						this.$u.toast('密码格式错误,至少6位(字母+数字)');
						return;
					}
				}
				if (!this.value) {
					this.$u.toast('请勾选已阅读《用户注册协议》与《隐私政策》');
					return;
				}
				this.form.ordersId = this.orderid;
				this.$http('luser.bind', this.form).then(r => {
					if (r.code == 200) {
						this.$u.toast(r.msg);


					}
				})
			},
			getCode() {
				if (this.form.foremanPhone == '') {
					this.$u.toast('请输入手机号码');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.foremanPhone)) {
						this.$u.toast('请输入正确的手机号码');
						return;
					}
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('user.code', {
						phone: this.form.foremanPhone
					}).then(r => {
						if (r.code == 200) {
							this.form.code = r.data;
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(r.msg);
						}
					});

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			regAgreement() {
				uni.navigateTo({
					url: "/pages/login/regAgreement"
				})
			},
			agreement() {
				uni.navigateTo({
					url: "/pages/login/agreement"
				})
			},

		},
	};
</script>

<style scoped lang="scss">
	.group_6 {
		padding-top: 38rpx;
		border-top: solid 1rpx #eaeaea;
	}

	.placeholderClass {
		color: #767676;
	}

	.image100 {
		width: 42rpx;
		height: 34rpx;
	}

	.view:nth-child(1) {
		margin-top: 0;
	}

	.app {
		color: #5B91E4;
		font-weight: 400;
	}

	.image_4 {
		margin-top: 9rpx;
		width: 34rpx;
		height: 34rpx;
	}

	.image_11 {
		width: 34rpx;
		height: 34rpx;
	}

	.reg {

		width: 640rpx;
		height: 88rpx;
		background: #1D6AFF;
		opacity: 1;
		margin: 90rpx auto 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
	}

	.page {

		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_8 {
		margin-top: 91rpx;
		display: flex;
		align-items: center;
	}

	.group_1 {
		padding: 0 32rpx;
		position: relative;
	}

	.group_2 {}

	.image_7 {
		margin-top: 8rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.group_9 {
		margin-left: 12rpx;
		line-height: 26rpx;
		height: 26rpx;
	}

	.image {
		position: absolute;
		left: 32rpx;
		bottom: 0px;
		width: 30rpx;
		height: 31rpx;
	}

	.text {
		color: #333333;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 48.6667vw;
	}

	.section_1 {
		margin: -54rpx 24rpx 0;
		padding: 44rpx 0 104rpx;
		background-image: linear-gradient(180deg, #e8f0ff 0%, #e8f0ff 0%, #ffffff 12.07%, #ffffff 100%);
		border-radius: 16rpx;
		position: relative;
	}

	.text_7 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_8 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_9 {
		color: #999999;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_10 {
		color: #181818;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_1 {
		align-self: center;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.divider {
		margin-top: 35rpx;
		background-color: #1d6aff33;
		height: 1rpx;
	}

	.group_3 {
		/* margin-top: 45rpx; */
		padding-left: 32rpx;
		padding-right: 31rpx;
	}

	.text_6 {

		align-self: center;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.view {
		margin-top: 43rpx;
	}

	.view_1 {
		margin-top: 44rpx;
	}

	.divider_1 {
		margin-top: 45rpx;
		background-color: #eaeaea;
		height: 1rpx;
	}

	.image_3 {
		align-self: center;
		width: 28rpx;
		height: 16rpx;
	}

	.text_3 {
		margin-left: 24rpx;
		margin-bottom: 4rpx;
		color: #999999;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_5 {
		margin: 4rpx 0 5rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_2 {
		margin-top: 7rpx;
		flex-shrink: 0;
		width: 34rpx;
		height: 36rpx;
	}

	.text_2 {
		margin-left: 24rpx;
		margin-bottom: 5rpx;
		color: #999999;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_6 {
		flex-shrink: 0;
	}

	.text_4 {
		margin-left: 24rpx;
		margin-bottom: 5rpx;
		color: #000000;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
